<template>
  <div class="new-library">
    <el-steps class="steps-style" :active="steps" finish-status="success">
      <el-step
        title="新建函数库"
        description="请先创建一个函数库，然后在该函数库下添加函数。"
      />
      <el-step title="新建函数" description="请新建函数。" />
      <el-step title="创建完成" description="已经完成创建啦。" />
    </el-steps>

    <div v-show="steps === 1">
      <build-function ref="functions" class="page" />
    </div>

    <div v-show="steps === 0">
      <build-library ref="library" class="page" />
    </div>

    <div v-show="steps > 1" class="page">
      <img src="@/assets/images/build-success.png" alt="">
      <span>
        函数已经创建成功！接下来 {{ second }}s 后将为您<br>跳转到。。。
      </span>
    </div>

    <div class="steps-footer">
      <el-button
        v-if="steps === 1"
        class="mr-20"
        type="primary"
        size="mini"
        round
        @click="steps -= 1;$store.commit('functions/setTitle', '新建函数库')"
      >上一步
      </el-button>
      <el-button
        v-if="steps < 2"
        type="primary"
        size="mini"
        round
        @click="jump"
      >
        下一步
      </el-button>
    </div>
  </div>
</template>

<script>
/**
 * path: '/functions-library',
 * name: 'NewLibrary',
 * title: "无函数库时引导"
 */
import BuildFunction from './plugins/BuildFunction.vue';
import BuildLibrary from './plugins/BuildLibrary.vue';
import { mapActions } from 'vuex';

export default {
  name: 'NewLibrary',
  components: {
    BuildFunction,
    BuildLibrary
  },
  data() {
    return {
      steps: 0,
      second: 3
    };
  },
  created() {
    this.$store.commit('functions/setTitle', '新建函数库');
  },
  methods: {
    ...mapActions('functions', ['createALiLibrary', 'createAliFunction']),
    jump() {
      switch (this.steps) {
        case 0:
          this.$refs.library.$refs.form.validate(valid => {
            if (valid) {
              this.steps = 1;
              this.$store.commit('functions/setTitle', '新建函数');
            } else {
              this.$message.error('请填写完整信息');
            }
          });
          break;
        case 1:
          if (this.$refs.functions.$refs.form.validate(valid => {
            if (!valid) {
              this.$message.error('请填写完整信息');
            } else {
              const library = this.$refs.library.get();
              const functions = this.$refs.functions.getForm();
              functions.libraryName = library.libraryName;
              this.createALiLibrary(library)
                .then((data) => {
                  return this.createAliFunction({
                    library,
                    functions
                  });
                })
                .then((dat) => {
                  this.$store.commit('functions/setTitle', '创建完成');
                  this.steps = 3;
                  this.timeout(3);
                });
            }
          })) { break; }
      }
    },
    timeout(second) {
      setTimeout(() => {
        this.second--;
        if (second <= 0) {
          this.$router.push({ name: 'MyLibrary' });
        } else {
          this.timeout(this.second);
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.new-library {
  height: calc(100vh - 100px);
  padding: 20px;
  overflow: auto;

  .steps-style {
    padding: 0 100px;
  }

  .page {
    margin: 100px 100px 0;
    text-align: center;

    img {
      width: 50px;
      height: 50px;
      display: inline-block;
      vertical-align: middle;
    }

    span {
      margin-left: 20px;
      display: inline-block;
      vertical-align: middle;
      text-align: left;
    }
  }

  .steps-footer {
    padding: 20px 100px 0;
  }
}

::v-deep .el-step__head.is-success,
::v-deep .el-step__title.is-success,
::v-deep .el-step__description.is-success {
  color: #409eff;
  border-color: #409eff;
}
</style>
